<template>
    <div class="user-info">
        <div class="body row">
            <div class="img"></div>

            <div class="info" v-if="isLogin">
                <div class="name">
                    {{ this.$store.state.userInfo.nickName }}
                </div>
                <div class="telephone">
                    手机号：{{ this.$store.state.userInfo.telephone }}
                </div>
            </div>

            <div class="info-none column" v-else>
                <div class="btn" @click="showLoginDialog">点击享受更多优惠</div>
                <UserLogin v-model="showLogin" @confirm="updateUserInfo" />
            </div>

            <div class="actions row">
                <div class="icon">
                    <img :src="require('@/assets/icon/setting.png')" />
                </div>
                <div>设置</div>
            </div>
        </div>
    </div>
</template>

<script>
import UserLogin from "./userLogin";
export default {
    components: {
        UserLogin
    },
    data() {
        return {
            showLogin: false
        };
    },

    computed: {
        isLogin() {
            return this.$store.state.userInfo.isLogin;
        }
    },

    methods: {
        showLoginDialog() {
            this.showLogin = true;
        },
        updateUserInfo({ telephone }) {
            this.$store.commit("updateUserInfo", {
                telephone,
                isLogin: true,
                nickName: `新用户${telephone.slice(-4)}`
            });

            console.log(this.$store.state.userInfo);

            wf.getModule("login").updateLoginInfo({
                ...this.$store.state.userInfo
            });

            this.$cloudApi
                .addUserInfo({
                    data: this.$store.state.userInfo
                })
                .then(res => {
                    this.onUpdate();
                });
        },
        onUpdate() {
            this.$showToast({
                title: "成功领取5元新人优惠卷！"
            });
            this.$bus.$emit("updateUserInfo");
        }
    }
};
</script>


<style lang="less" scoped>
.user-info {
    padding: 30px 30px 20px 30px;
    background: #fff;
    // margin-bottom: 20px;
    .body {
        width: 100%;

        .img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: #eee;
            margin-right: 30px;
        }

        .info {
            flex: 1 1 auto;
            padding: 20px 0 0 0;
            .name {
                font-size: 36px;
                font-weight: 600;
                margin-bottom: 15px;
            }
        }

        .info-none {
            padding: 0 30px;
            justify-content: center;
            .btn {
                color: #f40;
                font-size: 32px;
                font-weight: 600;
            }
        }

        .actions {
            align-items: center;
            .icon {
                width: 40px;
                height: 40px;
                margin-right: 10px;
            }
        }
    }
}
</style>